<template>
  <div class="stock-in-scan-code">
    <div class="c-query">
      <div class="c-query_item">
        <span>产品搜素</span>
        <n-input style="width:380px" type="text" placeholder="请输入产品款号" clearable/>
      </div>
      <button>添加</button>
    </div>
    <div class="c-list">
      
    </div>
    <div class="c-footer">
      <div class="c-footer_item">
        合计商品数量：233件
      </div>
      <div class="c-footer_line"></div>
      <div class="c-footer_item">
        合计积分：11
      </div>
      <div class="c-footer_line"></div>
      <div class="c-footer_item">
        合计总零售价：￥23123
      </div>
      <button class="c-footer_btn c-footer_btn--cancel" :class="{'c-footer_btn--active' : true}">取消入库</button>
      <button class="c-footer_btn c-footer_btn--confirm" :class="{'c-footer_btn--active' : true}">确认入库</button>
    </div>
  </div>
</template>

<script setup>
import { h, ref, reactive, provide } from 'vue';
import { useMessage, useDialog } from "naive-ui";

const message = useMessage();
const dialog = useDialog();
</script>

<style lang="less">
.stock-in-scan-code {
  display: flex;
  flex-direction: column;
  height: 100%;
  .c-query {
    display: flex;
    align-items: center;
    padding: 0 30px;
    margin-bottom: 28px;
    &_item {
      > span {
        margin-right: 19px;
        font-size: 26px;
        color: #2e323d;
      }
    }
    > button {
      margin-left: 18px;
      width: 114px;
      height: 60px;
      font-size: 26px;
      color: #2e323d;
      background: #f8f8f8;
      border: 1px solid #aaa;
      border-radius: 5px;
    }
  }
  .c-list {
    flex: 1;
    padding: 0 30px;
  }
  .c-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0 30px;
    height: 128px;
    box-sizing: border-box;
    box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.2);
    &_item {
      margin: 0 20px;
      font-size: 26px;
    }

    &_line {
      width: 1px;
      height: 30px;
      margin: 0 20px;
      background: #d8d8d8;
    }

    &_btn {
      width: 220px;
      height: 68px;
      margin-left: 30px;
      font-size: 30px;
      font-weight: 500;
      color: #fff;
      text-align: center;
      line-height: 68px;
      border-radius: 5px;
      opacity: .5;
    }

    &_btn--cancel {
      background: #EC3F14;
    }
    &_btn--confirm {
      background: #1981F4;
    }
    &_btn--active {
      opacity: 1;
    }
  }
}
</style>